<template>
    <div class="content">
        <div class="top">
            <ul>
                <li>
                    <SelectIpt :lists="repairSate" ref="repairSate"> 
                        <p>处理状态</p>
                    </SelectIpt>
                </li>
                <li>
                    <SelectIpt :lists="build" ref="build">
                        <p>楼栋</p>
                    </SelectIpt>
                </li>
                <li>
                    <SelectIpt :lists="unit" ref="unit">
                        <p>单元</p>
                    </SelectIpt>
                </li>
                <li>
                    <SelectIpt :lists="room" ref="room">
                        <p>房间</p>
                    </SelectIpt>
                </li>
                <li>
                    <TextIpt ref="repairName">
                        <p>报修人</p>
                    </TextIpt>
                </li>
            </ul>
            <div class="btn">
                <BlueBtn @click.native="query">查询</BlueBtn>
            </div>
        </div>
        <div class="table">
            <el-table :data="repairData.slice(pages, pages + 10)" border style="width: 100%">
                <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop"
                    :label="column.label" :width="column.width || null">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="lookIntro(scope.$index, scope.row)">{{ scope.row.ComplaintsState
                            == '未处理' ? '处理' :
                            '详情' }}</el-button>
                        <el-button size="mini" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="page">
                <div class="total-page">
                    <p>共<span>{{ Math.ceil(repairData.length / 10) }}</span>页/<span>{{ repairData.length }}</span>条数据
                    </p>
                </div>
                <el-pagination background layout="prev, pager, next,jumper" @current-change="getPage" :page-size=10
                    :current-page.sync=page :total="repairData.length" hide-on-single-page>
                </el-pagination>
            </div>
        </div>
             <!--查看详情对话框  -->
             <el-dialog title="提示" :visible.sync="introDialog" width="40%" :before-close="introClose" class="introDialog">
            <el-form ref="form" :model="introForm" :inline="true" label-width="100px" :rules="rules">
                <el-form-item label="维修类型">
                    <el-input disabled v-model="introForm.type"></el-input>
                </el-form-item>
                <el-form-item label="维修详情">
                    <el-input disabled v-model="introForm.desc"></el-input>
                </el-form-item>
                <el-form-item label="报修人">
                    <el-input disabled v-model="introForm.name"></el-input>
                </el-form-item>
                <el-form-item label="手机号" >
                    <el-input disabled v-model="introForm.phone"></el-input>
                </el-form-item>
                <el-form-item label="报修日期">
                    <el-input disabled v-model="introForm.date"></el-input>
                </el-form-item>
                <el-form-item label="报修状态" prop="state">
                    <el-select v-model="introForm.state" placeholder="请选择报修状态">
                        <el-option value="未处理"></el-option>
                        <el-option value="处理中"></el-option>
                        <el-option value="已处理"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitForm('form')">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import SelectIpt from '@/components/SelectIpt.vue';
import TextIpt from '@/components/TextIpt.vue';
import BlueBtn from '@/components/BlueBtn.vue';
export default {
    components: {
        SelectIpt,
        TextIpt,
        BlueBtn
    },
    data() {
        return {
            introForm: {
                name: '',
                type: "",
                desc: '',
                phone: "",
                date: '',
                state: '',
                index: '',
                id: ''
            },
            rules: {
                state: [
                    {
                        required: true, message: "请输入验证码", trigger: 'blur'
                    }
                ],
            },
            introDialog: false,
            //接口返回的所有数据
            repairAllData:[],
            //楼栋
            build: ['楼栋A', '楼栋B', '楼栋C', '楼栋D'],
            //单元
            unit: ['1单元', '2单元', '3单元'],
            //房间
            room: ['101', '102', '201', '202', '301', '302'],
            repairSate: ['未处理', '处理中', '已处理'],
            //当前
            page: 1,
            //page
            pages: 0,
            repairData: [],
            tableColumns: [
                { prop: 'BuildingName', label: '楼栋', width: 150 },
                { prop: 'UnitName', label: '单元', width: 150 },
                { prop: 'RoomNumber', label: '房间', width: 150 },
                { prop: 'RepairType', label: '维修类型', width: 150 },
                { prop: 'RepairIntro', label: '维修详情', width: 200 },
                { prop: 'Owner', label: '报修人', width: 150 },
                { prop: 'RepairDate', label: '报修日期', width: 200 },
                { prop: 'RepairState', label: '报修状态', width: 200 },
            ],
        }

    },
    methods: {
         //请求接口修改处理状态
         updateState(id,state) {
            this.$axios.post('http://127.0.0.1/repair/updateState', {
              id,
              state
            },{
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem('token')}`,
                    'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
                }
            }).then(res => {
                this.$message({
                    message: '修改成功',
                    type: 'success',
                    center: true
                });
                this.introDialog=false
            }).catch(err => {
                console.log(err);
            })
        },
        submitForm(formName) {
            console.log(this.introForm.index);
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    if (this.repairData[this.introForm.index].RepairState != this.introForm.state) {
                        this.repairData[this.introForm.index].RepairState = this.introForm.state
                        this.updateState(this.introForm.id,this.introForm.state)
                    }
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        lookIntro(index, row) {
           
            this.introForm.name = row.Owner
            this.introForm.type = row.RepairType
            this.introForm.desc = row.RepairIntro
            this.introForm.phone = row.Phone
            this.introForm.date = row.RepairDate
            this.introForm.state = row.RepairState
            this.introForm.index = index + this.pages
            this.introForm.id = row.ID
            this.introDialog = true
            console.log(this.introForm);
            
        },
        introClose() {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.introDialog = false
                })
                .catch(_ => { });
        },
        query() {
            this.pages = 0
            this.page = 0
            const serach = {}
            if ( this.$refs.repairSate.value) {
                serach.repairSate =  this.$refs.repairSate.value
            }
            if ( this.$refs.build.value) {
                serach.build =  this.$refs.build.value
            }
            if (this.$refs.unit.value) {
                serach.unit = this.$refs.unit.value
            }
            if ( this.$refs.room.value) {
                serach.room = this.$refs.room.value
            }
            if ( this.$refs.repairName.input) {
                serach.repairName =  this.$refs.repairName.input
            }
             this.repairData=this.repairAllData.filter(item => {
                // 检查Status是否匹配
                if ( serach.repairSate && item.RepairState !==  serach.repairSate) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 检查Building是否匹配
                if (serach.build && item.BuildingName !== serach.build) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.unit && item.UnitName !== serach.unit) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.room && item.RoomNumber !== serach.room) {
                    return false; // 如果不匹配，则排除该房间
                }
                if (serach.repairName && !item.Owner.includes(serach.repairName)) {
                    return false; // 如果不匹配，则排除该房间
                }
                // 如果所有条件都匹配或为空（表示用户没有为该字段指定筛选条件），则返回true以包含该房间
                return true;

            })
            console.log(this.repairData);
            
        },
        //get 当前页
        getPage(page) {
            this.pages = 10 * (page - 1)
        },
    },
    mounted() {
        fetch('http://127.0.0.1/repair/all', {
            method: 'GET', // 请求方法
            headers: {
                'Authorization': `Bearer ${localStorage.getItem('token')}`,
                'Content-Type': 'application/json' // 如果需要发送 JSON 数据，则包含此行 // 设置请求头
            }
        }).then(res => res.json()).then(res1 => {
            this.repairData = res1
            this.repairAllData=res1
        }).catch(err => {
            console.log(err);
        })
    }
}
</script>

<style scoped>
.introDialog>>>.el-input {
    width: 200px;
}

.introDialog>>>.el-dialog__body {
    padding: 30px 50px;
}
.table>>>.el-table {
    min-height: 580px;
}

.page {
    display: flex;
    align-items: center;
    justify-content: end;
    margin-top: 20px;
}

.page>>>button {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    background: #fff !important;
}

.page>>>.active {
    border-color: rgba(26, 135, 254, 1) !important;
    background-color: rgba(26, 135, 254, 1) !important;
    color: #fff !important;
}

.page>>>.el-pager li {
    min-width: 35px !important;
    height: 25px;
    line-height: 25px;
    border-radius: 3px !important;
    border: 1px solid rgba(215, 215, 215, 1);
    font-size: 12px;
    color: #999;
    font-weight: normal !important;
    background: #fff;
}

.total-page span {
    color: #FF3C2C;
}

.total-page {
    font-size: 12px;
    color: #666;
}

.table>>>.cell {
    text-align: center;
}

.top li {
    margin-bottom: 20px;
}
</style>